<template>
  <!-- 导航 -->
  <div class="nav-courses">
    <div class="courses-container container">
      <ul class="ui-nav">
        <li class="col-4 courses-nav-item" v-for="item in list" :key="item.id">
          <nuxt-link :to="item.path">{{item.label}}</nuxt-link>
        </li>
        <li class="col-4 courses-nav-item nav-item--ranking">
          <nuxt-link to="/ranking">
            <div class="ranking-icon">
              <i class="el-icon-s-data"></i>
            </div>
            <div class="ranking-text">排行榜</div>
          </nuxt-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "homeCourses",
  props: {},
  data() {
    return {
      list: [
        {
          label: "公证基础课程",
          path: "/search",
          id: 1
        },
        {
          label: "公证基础课程",
          path: "/search",
          id: 2
        },
        {
          label: "公证基础课程",
          path: "/search",
          id: 3
        },
        {
          label: "公证基础课程",
          path: "/search",
          id: 4
        },
        {
          label: "公证基础课程",
          path: "/search",
          id: 5
        },
        {
          label: "排行榜",
          path: "/search",
          id: 6
        }
      ]
    };
  },
  mounted() {},
  methods: {}
};
</script>

<style scoped lang="scss">
@import "~/scss/helpers/_utils.scss";

// 导航
$courses-height: 70px;
.nav-courses {
  width: 100%;
  height: 70px;
  background: #f7f8fa;

  .courses-nav-item {
    position: relative;
    & > a {
      height: $courses-height;
      line-height: $courses-height;
      font-size: 18px;
      color: #333;
    }
  }

  .nav-item--ranking {
    line-height: $courses-height;
    @include utils-vertical-center;

    a {
      height: auto;
      line-height: 1;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      text-align: center;
      border-left: 1px solid #bebebe;
    }
    .ranking-icon > i {
      color: #fc4506;
      font-size: 24px;
    }
    .ranking-text {
      font-size: 14px;
      color: #666;
      line-height: 1;
    }
  }
}
</style>
